<template>
    <!-- 轮播图开始 -->
    <div class="swiper">
        <swiper class="swiper-box" :options="swiperOption" ref="mySwiper">
            <!-- 轮播的图片 -->
            <swiper-slide   class="swiper-ietm" v-for="(item,index) in list" :key="index">
              <router-link tag='div' class="item" to="/openblind">
                  <img :src="item.skinDetailImage"/>
                  <span>{{item.skinDetailName}}</span>
              </router-link>
            </swiper-slide>

            <!-- <div class="swiper-button-prev"
             slot="button-prev"></div>
            <div class="swiper-button-next"
             slot="button-next"></div> -->
            <!-- 小圆点分页器 -->
            <!-- <div class="swiper-pagination"  slot="pagination"></div> -->
        </swiper>
    </div>
    <!-- 轮播图结束 -->
</template>

<script>
    export default {
      name:'swiperltwo',
      props: ['swiperlistData'],
      data() {
          return {
              swiperOption:{
                  loop: true, // 设置图片循环
                  autoplay: true, //设置可自动播放
                  speed: 2000, //自动播放的速度，每隔1秒滑动一次
                  slidesPerView :7,
                  allowTouchMove: false,
                  freeMode: true,
                  // pagination: {
                  //    el: ".swiper-pagination",//分页器的类名
                  //    clickable: true //设置分页小圆点可手动点击
                  // },
                  //  navigation: {
                  //           nextEl: '.swiper-button-next',
                  //           prevEl: '.swiper-button-prev',
                  // }

              },
              list:[],
          }
      },
      methods:{
        get_list(){
          this.$api.get('/api/home/newGetSkin',
          null, r => {
                  this.list = r.data
             })
        }
      },
        created() {
          this.get_list()
          // console.log(this.swiperlistData)
        }
    }
</script>

<style scoped>
/* swiper轮播图样式设置开始 */
/* 修改分页小圆点的默认样式 */
.item img{
  position: absolute;
  top: 40%;
  right: 50%;
  width: auto;
  height: auto;
  max-width: 200px;
  max-height: 140px;
  transform: translate(50%,-50%);
}
.item span{
  font-size: 16px;
  position: absolute;
  left: 50%;
  margin-left: -100px;
  bottom: 24px;
  width: 200px;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
  text-align: center;
}
.item{
  background-image: url(../assets/swiper-list-bg.jpg);
  height: 200px;
  color: #939CAB;
  position: relative;
  background-size: 100% 100%;
}
.item:hover{
  background-image: url(../assets/swiper-list-bg-ac.jpg);
  color: #fff;
  background-size: 100% 100%;
}
.swiper >>> .swiper-pagination-bullet-active {
    background-color: #fff;
}
.swiper {
    width: 1920px;
    margin:  0 auto;
}
.swiper-box{
  /* width: 1920px; */
}
/* swiper轮播图样式设置结束 */
</style>
